import { useI18n } from '@/hooks/web/useI18n'
import { reactive, UnwrapRef } from 'vue'
import { CrudSchema } from '@/hooks/web/useCrudSchemas'
import { useValidator } from '@/hooks/web/useValidator'
const { t } = useI18n()
import { ActionButtonsTemplate } from '@/api/global/types'
import { ElMessage, ElMessageBox } from 'element-plus'
import { uploadFileApiApi } from '@/api/upload'
import { BaseButton } from '@/components/Button'
import { UploadItem } from '@/api/product/types'
import { createPreViewDialogStoreType } from '@/store/modules/preViewDialog'

const { required } = useValidator()
export default function (
  actionButtonsTemplate?: ActionButtonsTemplate,
  UploadArr?: UnwrapRef<UploadItem[]>,
  uploadList?: UnwrapRef<string[]>,
  productPreViewStore?: createPreViewDialogStoreType,
  fieldEnum?: any
) {
  const currencyOption = reactive(fieldEnum?.value?.algorithm || [])
  const showOption = reactive(fieldEnum?.value?.if_show || [])
  const crudSchemas = reactive<CrudSchema[]>([
    {
      field: 'selection',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        type: 'selection'
      }
    },
    {
      field: 'id',
      label: t('currency.id'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'name',
      label: t('currency.name'),
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'name_short',
      label: t('currency.name_short'),
      form: {
        component: 'Input'
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'algorithm',
      label: t('currency.algorithm'),
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        componentProps: {
          filterable: true,
          options: currencyOption
        },
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.algorithm_name
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.algorithm_name
          }
        }
      }
    },
    {
      field: 'if_show',
      label: t('currency.if_show'),
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        componentProps: {
          filterable: true,
          options: showOption
        },
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.show_status
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.show_status
          }
        }
      }
    },
    {
      field: 'sort',
      label: t('currency.sort'),
      search: {
        hidden: true
      },
      form: {
        component: 'InputNumber'
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'description',
      label: t('brand.description'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        componentProps: {
          type: 'textarea'
        }
      },
      table: {
        hidden: true
      }
    },
    {
      field: 'image',
      label: t('currency.image'),
      search: {
        hidden: true
      },
      form: {
        component: 'Upload',
        componentProps: {
          limit: 1,
          fileList: UploadArr,
          listType: 'picture-card',
          multiple: true,
          onPreview: (uploadFile) => {
            productPreViewStore!.src = uploadFile.url
            productPreViewStore?.openDialog()
          },
          onRemove: (file) => {
            console.log(file.response)
            const index = uploadList ? uploadList.indexOf(file.response) : -1
            if (index !== -1) {
              // 删除这个元素
              uploadList?.splice(index, 1)
            }
          },
          beforeRemove: (uploadFile) => {
            return ElMessageBox.confirm(`确定删除 ${uploadFile.name} ?`).then(
              () => true,
              () => false
            )
          },
          onExceed: (files) => {
            ElMessage.warning(`最多可上传 1 张图片, 您总共上传了  ${files.length} 张图片 `)
          },
          httpRequest: (uploadOptions) => {
            const { file, onSuccess, onError } = uploadOptions
            const reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = async () => {
              const base64 = reader.result
              const uploadFormat = { file: base64, directory: 13 }
              const res = await uploadFileApiApi(uploadFormat)
                .catch((error) => {
                  console.error('上传失败:', error)
                })
                .finally(() => {
                  // loading.value = false
                })
              if (res) {
                uploadList?.push(res.data.url)
                onSuccess(res.data)
              } else {
                onError(2222222)
              }
            }
          },
          slots: {
            default: () => <BaseButton type="primary">上传</BaseButton>,
            tip: () => <div class="el-upload__tip">最多上传1张图片</div>
          }
        }
      },
      table: {
        hidden: true
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.image
              ? data.image
                  .split(',')
                  .map((item) => <img src={`${item}`} class="photo_default" alt="" />)
              : null
          }
        }
      }
    },
    {
      field: 'create_time',
      label: t('currency.create_time'),
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'create_name',
      label: t('currency.creator'),
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'update_time',
      label: t('currency.update_time'),
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'update_name',
      label: t('currency.updater'),
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'action',
      width: (actionButtonsTemplate?.length || 3) * 60 + 20 + 'px',
      label: t('tableDemo.action'),
      fixed: 'right',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return actionButtonsTemplate?.template(data) ?? null
          }
        }
      }
    }
  ])

  return {
    crudSchemas
  }
}
